import './App.css';
import { lazy , Suspense} from 'react';
import { Routes, Route, Link } from "react-router-dom";
import Product from './component/Product';
// const HooksUseState  = lazy(()=> import(/*webpackChunkName: "HooksUseState" */'./component/Hooks_useState'));
const HooksUseState  = lazy(()=> import('./component/Hooks_useState'));

const HooksUseEffect  = lazy(()=> import(/*webpackChunkName: "HooksUseEffect" */'./component/Hooks_useEffect'));
function App() {
  return (
    <div className="App">
        <Link to="/" exact='true' >HooksUseState</Link>
          <br/>
        <Link to="/Effect" >HooksUseEffect</Link>
        <br/>
        <Link to="/product" >product</Link>
        <Suspense fallback={<div>loading</div>}>
          <Routes>
            <Route path="/"  element={<HooksUseState />}/>
            <Route path="/Effect" element={<HooksUseEffect />}/>
            <Route path="/product" element={<Product />}/>
            
          </Routes>
        </Suspense>
    </div>
  );
}

export default App;
